<template>
  <div class="BashStepForm13">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="220px"
      class="demo-ruleForm"
      :rules="rules"
    >
      <div class="must">
        <!--<el-form-item label="申请人名义(中文):">-->
        <!--<el-input v-model="ruleForm.partAddrCh" placeholder="请填写联系人"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="(英文):">-->
        <!--<el-input v-model="ruleForm.partAddrEn" placeholder="请填写联系人"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="申请人地址(中文):">-->
        <!--<el-input v-model="ruleForm.partNameCh" placeholder="请填写联系人"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="(英文):">-->
        <!--<el-input v-model="ruleForm.partNameEn" placeholder="请填写联系人"></el-input>-->
        <!--</el-form-item>-->
        <!-- <el-form-item label="联系人：" prop="contact">
          <el-input v-model="ruleForm.contact" placeholder="请填写联系人"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>联系人不能为空</span>
            </div>
          </div>
        </el-form-item>-->
        <!--<el-form-item label="代理机构名称：">-->
        <!--<el-input v-model="ruleForm.ageName" placeholder="请填写代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="商标申请号/注册号：" prop="appNum">
          <el-input v-model="ruleForm.appNum" placeholder="请填写商标申请号/注册号"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：商标申请号/注册号不能为空</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="原变更申请号：" prop="registNumOri">
          <el-input v-model="ruleForm.registNumOri" placeholder="请填写原变更申请号"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：原变更申请号不能为空</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="撤回变更管理规则：" prop="rule">
          <span id="ask">*</span>
          <!-- <el-checkbox v-model="ruleForm.withdrawalChangeRule" true-label="1" false-label="0">是</el-checkbox> -->
          <el-radio v-model="ruleForm.withdrawalChangeRule" label="1">是</el-radio>
          <el-radio v-model="ruleForm.withdrawalChangeRule" label="0">否</el-radio>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：选项不能为空</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="撤回变更集体成员名单：" prop="nameList">
          <span id="asc">*</span>
          <!-- <el-checkbox v-model="ruleForm.withdrawalChangePerson" true-label="1" false-label="0">是</el-checkbox> -->
          <el-radio v-model="ruleForm.withdrawalChangePerson" label="1">是</el-radio>
          <el-radio v-model="ruleForm.withdrawalChangePerson" label="0">否</el-radio>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：选项不能为空</span>
            </div>
          </div>
        </el-form-item>
        <!--<el-form-item label="商标类别编号:" prop="type">-->
        <!--<el-input class="type-number" v-model="ruleForm.type" placeholder="请填写类别"></el-input>-->
        <!--<span class="informs">-->
        <!--请点此-->
        <!--<a href>下载商标说明书</a>,查到相应商标编号并填充-->
        <!--</span>-->
        <!--</el-form-item>-->

        <div>
          <el-form-item class="upload" label="网上确认书：" prop="upload">
            <span class="xing">*</span>
            <!-- <span id="ast">*</span> -->
            <div>
              <upfile :callback="setSure">
                <img
                  :src="old_imgs['qrfile']"
                  style=" width:200px;margin-bottom:10px"
                  v-if="old_imgs['qrfile']"
                />
              </upfile>
              <div class="exam-img">
                <div class="img-inform">
                  <img src="../../assets/imgs/inform.png" />
                  <span>示例:</span>
                </div>
                <examimg :imgType="7"></examimg>
              </div>
            </div>
            <div>
              <span class="informs">
                请点此
                <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>,查到相应商标编号并填充
                <br />
                <span class="noticesx">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
              </span>
            </div>
          </el-form-item>
        </div>
        <!-- 添加其他有效证件 -->
        <div class="adjunct">
          <el-form-item label="其他附件：" prop="dengjichenluofile">
            <uploads
              :callback="backUrl"
              :delUrl="delUrl"
              :file_config="{field:'dengjichenluofile'}"
              :list="ruleForm.dengjichenluofile"
            ></uploads>
            <div class="inform">
              <img src="../../assets/imgs/inform.png" alt="通知" />
              <div class="content">
                <span>提示：其他附件</span>
              </div>
            </div>
          </el-form-item>
        </div>

        <!-- <el-form-item label="是否共有商标：">
        <el-radio v-model="ruleForm.isComm" label="1">是</el-radio>
        <el-radio v-model="ruleForm.isComm" label="0">否</el-radio>
        </el-form-item>-->

        <el-form-item label="是否共有商标:" prop="radio">
          <span id="star">*</span>
          <el-radio-group v-model="ruleForm.isComm" @change="eliminates">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：选项不能为空</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="其他共有申请人：" v-if="!!(ruleForm.isComm-0)">
          <both
            :callback="getBoth"
            :append="$store.state.alterData.append"
            :class_id="$route.query.id"
          ></both>
        </el-form-item>
        <!--<template v-if="!!(ruleForm.isComm-0)">-->
        <!--<el-card v-for="(item,index) in ruleForm.proAppendJson" :key="index">-->
        <!--<div class="less">-->
        <!--<i class="el-icon-circle-close" @click="cutShare(index)"></i>-->
        <!--</div>-->
        <!--<el-form-item-->
        <!--label="名称(中文)："-->
        <!--:key="item.key"-->
        <!--:prop="'proAppendJson.' + index + '.partNameCh'"-->
        <!--:rules="{required: true, message: '选项不能为空', trigger: 'blur'}">-->
        <!--<el-input v-model="ruleForm.proAppendJson[index].partNameCh" placeholder="请填写代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="名称(英文)：">-->
        <!--<el-input v-model="ruleForm.proAppendJson[index].partNameEn" placeholder="请填写代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label=" 地址(中文)：" :key="item.key"-->
        <!--:prop="'proAppendJson.' + index + '.partAddrCh'"-->
        <!--:rules="{required: true, message: '选项不能为空', trigger: 'blur'}">-->
        <!--<el-input v-model="ruleForm.proAppendJson[index].partAddrCh" placeholder="请填写代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="地址(英文)：" style="margin-bottom: 0px">-->
        <!--<el-input v-model="ruleForm.proAppendJson[index].partAddrEn" placeholder="请填写代理机构名称"></el-input>-->
        <!--</el-form-item>-->
        <!--</el-card>-->
        <!--<div class="add" style="margin-left: 300px; margin-bottom:20px">-->
        <!--<i class="el-icon-circle-plus-outline" @click="addShare"></i>-->
        <!--</div>-->
        <!--&lt;!&ndash;<el-button icon="el-icon-plus" @click="plus" circle></el-button>&ndash;&gt;-->
        <!--</template>-->
        <el-form-item label="撤回理由：" prop="reasonsWithdrawal">
          <el-input type="textarea" v-model="ruleForm.reasonsWithdrawal" placeholder="请填写撤回理由"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：撤回理由不能为空</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <!-- <el-button type="primary" @click="outletVisible = true">提交并审核</el-button> -->
            <el-button type="primary" @click="testing('ruleForm')">提交并审核</el-button>
          </div>
          <!-- <div class="Id-box" v-if="hide"> <span><img :src="this.img"   alt=""></span></div>  -->
        </el-form-item>
      </div>
    </el-form>
    <el-dialog class="outletDialog" :center="true" :visible.sync="outletVisible" width="30%">
      <div class="outletTop">
        <i class="el-icon-message-solid"></i>
        <span>选择你想去办理的网点</span>
      </div>
      <el-row type="flex"  class="dialog">
        <el-col :span="5" class="text">
          <i>*</i>选择网点:
        </el-col>
        <el-col :span="10">
          <el-select v-model="ruleForm.branchNetworkId" placeholder="请选择">
            <el-option
              v-for="item in outletsList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="outletVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import upfile from "../common/upfile.vue";
import config from "../../utils/config";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
  components: {
    upfile,
    both,
    examimg,
    uploads,
  },
  data() {
    return {
      showImg: "",
      //提交表单
      // // formData: new FormData(),
      // hide:false,
      // img:"",
      Jump: false,
      ruleForm: {
        partAddrCh: "", //申请人名义(中文)*
        partAddrEn: "", //申请人名义(英文)
        partNameCh: "", //申请人地址(中文)*
        partNameEn: "", //申请人地址(英文)
        // contact: "", // 联系人
        //        ageName: "", // 代理机构名称
        appNum: "", // 商标申请号/注册号
        registNumOri: "", // 原变更申请号
        isComm: 0, // 是否共有商标
        withdrawalChangeRule: "0", // 撤回变更管理规则
        withdrawalChangePerson: "0", // 撤回变更集体成员名单
        reasonsWithdrawal: "", // 撤回理由
        branchNetworkId: "", // 网点编号
        userId: this.$store.state.userId, // 用户id
        classId: this.$route.query.id, // 业务id
        fixed: "1", // "操作类型保存提交
        upload: "",
        dengjichenluofile: [], //其他附件
        //        commonArr: [
        //          {
        //            partNameCh: "",
        //            partNameEn: "",
        //            partAddrCh: "",
        //            partAddrEn: "",
        //          },
        //        ],
        proAppendJson: [
          {
            partNameCh: "",
            partNameEn: "",
            partAddrCh: "",
            partAddrEn: "",
          },
        ],
      },
      outletsList: [], // 网点列表
      outletVisible: false,
      // 共有人列表
      throttling: "", // 节流
      //共有人模板
      //      common: [
      //        {
      //          name: "名义(中文)",
      //          englishName: "(英文)：",
      //          site: "地址(中文)：",
      //          englishSite: "(英文)：",
      //            partNameCh: "",
      //            partNameEn: "",
      //            partAddrCh: "",
      //            partAddrEn: "",
      //        },
      //      ],
      old_imgs: {},

      rules: {
        appNum: [
          {
            required: true,
            message: "请输入商标注册号",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z0-9]{0,30}$/,
            message: "请输入正确的商标注册号",
            trigger: "blur",
          },
        ],
        // dengjichenluofile: [
        //   { required: true, message: "请传入其他附件", trigger: "blur" },
        // ],
        registNumOri: [
          {
            required: true,
            message: "请输入申请号",
            trigger: "blur",
          },
          {
            pattern: /^[A-Za-z0-9]{0,30}$/,
            message: "请输入正确的申请号",
            trigger: "blur",
          },
        ],
        // upload:[
        //   {required: true, message: "商标确认书不能为空", trigger: "blur"}
        // ],
        // contact: [
        //   { required: true, message: "选项不能为空", trigger: "blur" },
        //   {
        //     pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
        //     message: "请输入正确的名称",
        //     trigger: "blur",
        //   },
        // ],
        // rule: [{ required: true, message: "请选择", trigger: "blur" }],
        // nameList: [{ required: true, message: "请选择", trigger: "blur" }],
        // radio: [{ required: true, message: "请选择", trigger: "blur" }],
        // upload: [
        //     { required: true, message: "商标确认书不能为空", trigger: "blur" },
        // ],
        reasonsWithdrawal: [
          { required: true, message: "请填写撤回理由", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
    //    common: {
    //      handler(newName, oldName) {
    //        this.common.forEach((item, index) => {
    //          this.ruleForm.commonArr[index].partNameCh = item.partNameCh;
    //          this.ruleForm.commonArr[index].partNameEn = item.partNameEn;
    //          this.ruleForm.commonArr[index].partAddrCh = item.partAddrCh;
    //          this.ruleForm.commonArr[index].partAddrEn = item.partAddrEn;
    //        });
    //      },
    //      deep: true,
    //    },
  },
  methods: {
    getBoth(value) {
      this.ruleForm.proAppendJson = value;
    },
    //清楚选项，前一个选择的数据
    eliminates() {
      for (let index = 0; index < this.ruleForm.proAppendJson.length; index++) {
        if (this.ruleForm.isComm == 0) {
          this.ruleForm.proAppendJson[index].partNameCh = "";
          this.ruleForm.proAppendJson[index].partNameEn = "";
          this.ruleForm.proAppendJson[index].partAddrCh = "";
          this.ruleForm.proAppendJson[index].partAddrEn = "";
        }
      }
    },
    //网上确认书
    setSure(files) {
      this.ruleForm.qrfiles = files[0];
      this.old_imgs["qrfile"] = "";
      console.log(this.ruleForm.qrfiles);
      if (this.ruleForm.qrfiles) {
        this.showImg = true;
      }
      // this.showImg = false
      // this.uploadImg = true
      //console.log(this.ruleForm.qrfiles)
    },

    //其他证件
    backUrl(url, file_config) {
      this.ruleForm[file_config["field"]].push(url);
    },
    delUrl(index, file_config) {
      this.ruleForm[file_config["field"]].splice(index, 1);
      this.$set(
        this.ruleForm,
        file_config["field"],
        this.ruleForm[file_config["field"]]
      );
    },

    //网上确认书
    // setSure(files){
    //     this.ruleForm.qrfiles=files[0]
    //     let old=JSON.parse(JSON.stringify(this.old_imgs))
    //     this.old_imgs={}
    //     delete old["qrfiles"]
    //     this.old_imgs=old
    // },

    dele() {
      //      this.ruleForm.commonArr.pop();
      //  this.common.pop();
      // this.ruleForm.commonArr.pop();
    },
    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //点击添加更变许可人
    plus() {
      //      let objCommom = JSON.parse(JSON.stringify(this.ruleForm.commonArr[0]));
      //      this.ruleForm.commonArr.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      //      this.common.push({
      //        name: "更变前名称(中文)：",
      //        englishName: "(英文)：",
      //        site: "变更前地址(中文)：",
      //        englishSite: "(英文)：",
      //        value: "",
      //        englishValue: "",
      //        siteValue: "",
      //        englishSiteValue: "",
      //      });
    },

    // 提交前验证
    // testing(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     console.log(valid)
    //     if (valid == false) {
    //       this.outletVisible = false;
    //     } else {
    //       this.outletVisible = true;
    //     }
    //   });
    // },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },

    testing(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid == false) {
          this.outletVisible = false;
        } else {
          if (this.showImg) {
            this.outletVisible = true;
          } else {
            this.open1("请上传网上确认书", "error");
          }
        }
      });
    },

    // 确认添加
    confirmAdd() {
      if (this.throttling && Date.now() - this.throttling < 1500)
        return this.$message.warning("请勿重复操作");
      this.throttling = Date.now();

      this.requerstCommit().then(({ data: res }) => {
        if (res.code !== 200) return this.$message.error("提交失败");
        this.outletVisible = false;
        this.$alert(
          "您的信息已提交,工作人员将在3-5日内对你的信息审核,审核通过后即可预约业务,审核结果将通过短信方式发送给你。",
          "温馨提示",
          {
            confirmButtonText: "确认",
            center: true,
            showClose: false,
            acllback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          }
        ).then((res) => {
          this.$router.push({
            path: "/business/myBusiness/auditing",
          });
        });
      });
    },
    // 选择网点
    selectNetworkId() {
      this.outletVisible = true;
    },
    // 删减共有人
    cutShare(index) {
      this.ruleForm.proAppendJson.splice(index, 1);
    },
    // 添加共有人
    addShare() {
      this.ruleForm.proAppendJson.push({
        partNameCh: "",
        partNameEn: "",
        partAddrCh: "",
        partAddrEn: "",
      });
    },
    // 提交请求
    requerstCommit() {
      //      let {
      //        name: partAddrCh,
      //        englishName: partAddrEn,
      //        site: partNameCh,
      //        phone,
      //        postal: postCode,
      ////        englishSite: partNameEn,
      //        // numbers,
      //        numbers, //证件号码
      //      } = this.$store.state.storeDatas;
      let storeData = {
        //        partAddrCh,
        //        partAddrEn,
        //        partNameCh,
        //        postCode,
        //        partNameEn,
        isComm: this.ruleForm.isComm,
        qrfiles: this.old_imgs.qrfiles ? {} : this.ruleForm.qrfiles,
        withdrawalChangeRule: this.ruleForm.withdrawalChangeRule,
        withdrawalChangePerson: this.ruleForm.withdrawalChangePerson,
        //        phone,
        //        optype: "1",
        //        appliType: this.$store.state.picType,
        //        idcardimg: this.$store.state.id_card_info
        //          ? this.$store.state.id_card_info.id_card
        //          : "",
      };
      let dataList = Object.assign({}, storeData, this.ruleForm);

      this.formData = new FormData();
      for (let key in dataList) {
        this.formData.append(key, dataList[key]);
      }
      let arr = this.$store.getters.getRuleForm;
      for (let key in arr) {
        this.formData.append(key, arr[key]);
      }
      //      this.formData.append(
      //        "idcardimg",
      //        this.$store.state.id_card_info
      //          ? this.$store.state.id_card_info.id_card
      //          : ""
      //      ); //身份证正反面地址
      //      this.formData.append(
      //        "idcardface",
      //        this.$store.state.id_card_info ? this.$store.state.id_card_info.url : ""
      //      ); //身份证正面地址
      //      this.formData.append(
      //        "busimg",
      //        this.$store.state.company_card_info
      //          ? this.$store.state.company_card_info.url
      //          : ""
      //      ); //营业执照地址

      //console.log( JSON.stringify(this.proAppendJson),56456)
      // this.ruleForm.isComm === "1" &&
      // json数据
      // if(this.ruleForm.isComm == 1){
      this.formData.append(
        "proAppends",
        JSON.stringify(this.ruleForm.proAppendJson)
      );
      console.log(JSON.stringify(this.ruleForm.proAppendJson));
      // }
      // console.log(this.proAppendJson);
      //添加其他附件
      this.formData.append(
        "otherfile",
        JSON.stringify(this.ruleForm.dengjichenluofile)
      );
      var config = {
        header: {
          "Content-Type": "multipart/form-data;charset=utf-8",
        },
      };
      // 修改
      if (this.$store.state.stateJdg) {
        this.formData.append("id", this.$store.state.storeId);
        return this.$http.post(
          "/trademark/proWncaa/modifyNoCommit",
          this.formData,
          config
        );
        // 新增
      } else {
        return this.$http.post(
          "/trademark/proWncaa/firstSubmit",
          this.formData,
          config
        );
      }
    },
  },
  created() {
    this.$http.get("/trademark/system/dept/findDept").then(({ data: res }) => {
      if (res.code !== 200) return; //console.error("网点列表获取失败");
      this.outletsList = res.data;
    });
  },

  mounted() {
    if (this.$store.state.stateJdg) {
      this.showImg = true;
      //console.log(this.$store.state.alterData.data, 9999);
      this.hide = true;
      let {
        appNum,
        //        ageName,
        registNumOri,
        isComm,
        withdrawalChangeRule,
        withdrawalChangePerson,
        reasonsWithdrawal,
        qrfile,
        otherfile,
        // contact,
      } = Object.assign(
        this.$store.state.alterData.public,
        this.$store.state.alterData.data
      );

      this.ruleForm.proAppendJson = this.$store.state.alterData.append;
      // this.ruleForm.contact = contact;
      this.ruleForm.appNum = appNum;
      this.ruleForm.registNumOri = registNumOri;
      this.ruleForm.isComm = isComm;
      this.ruleForm.withdrawalChangeRule = String(withdrawalChangeRule);
      this.ruleForm.withdrawalChangePerson = String(withdrawalChangePerson);
      //console.log(this.ruleForm,465)
      this.ruleForm.reasonsWithdrawal = reasonsWithdrawal;

      if (qrfile) {
        this.$set(this.old_imgs, "qrfile", this.mconfig.host + qrfile);
      }
      this.ruleForm.dengjichenluofile = JSON.parse(otherfile);
      // if (qrfile) {
      //   this.old_imgs.qrfile = this.mconfig.host + qrfile;
      // }
    }
  },
};
</script>

<style lang="less" scoped>
.upload {
  margin: 20px 0;
  // margin-right:10px ;
  width: 200px;
}
.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 1rem;
  }
}

.BashStepForm13 {
  width: 550px;

  .el-card {
    position: relative;
    overflow: visible;
    box-shadow: none;
    border: none;
    .less {
      position: absolute;
      right: -5rem;
      top: 1.5rem;
      width: 5rem;
      text-align: center;
      font-size: 1rem;
      i {
        margin: 0 0.5rem;
      }
    }
  }

  .must,
  .select {
    display: flex;
    position: relative;
    left: -60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    // width: 1000px;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .inform {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 100%;
      width: 250px;
      height: 32px;
      color: #f96900;
      font-size: 10px;
      line-height: 16px;
      img {
        margin: 11px;
      }
      .content {
        display: flex;
        flex-direction: column;
        .ts {
          text-indent: 3em;
        }
      }
    }
    .el-form-item {
      width: 580px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
      margin-bottom: 22px;
    }
  }

  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .noticesx {
    color: #f00;
    font-size: 12px;
  }
  .add {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: flex-end;
    padding-right: 5rem;
  }

  .outletDialog {
    padding: 34px 38px;
    .outletTop {
      // height: 17px;
      color: #f96900;
      // font-size: 12px;
      // line-height: 17px;
      padding: 15px 20px;
      font-size: 14px;
      i {
        width: 15px;
        height: 15px;
      }
    }

    /deep/.el-dialog {
      width: 23rem !important;
      .el-input__inner {
        width: 12.5rem;
      }
      .el-button {
        width: 3.7rem;
        height: 2rem;
        padding: 0;
        margin: 0 20px;
        line-height: 1.6rem;
      }
      .dialog-footer {
        display: flex;
        justify-content: space-between;
      }
      .el-row {
        // margin-top: 1.6rem;
        height: 1.6rem;
        line-height: 1.6rem;
        margin-bottom: 1.5rem;
        // /deep/.el-input__inner {
        //   height: 1.6rem;
        // }
        .text i {
          color: red;
          font-size: 20px;
          vertical-align: sub;
          padding: 0 3px;
        }
        .text {
          white-space: nowrap;
        }
        .el-select {
          margin-left: 1rem;
        }
      }
    }
  }
}
.el-message-box__btns {
  text-align: center;
}
.cancel {
  background: #ccc;
  border-color: #ccc;
}

.dialog /deep/.el-form-item__content {
  display: flex;
  justify-content: left;
  border: 1px solid red;
  margin-left: 100px ;
}


/deep/ .el-dialog.el-dialog--center /deep/ {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .hint {
    color: #f96900;
    background-color: #fff;
    padding: 0;
    padding-bottom: 20px;
  }

  .el-button {
    margin: 0;
  }

  .el-form-item__label {
    width: 86px !important;
  }
}

#star {
  position: absolute;
  color: red;
  margin-left: -110px;
}

#ast {
  position: absolute;
  color: red;
  margin-left: -96px;
}
#ask {
  position: absolute;
  color: red;
  margin-left: -147px;
}
#asc {
  position: absolute;
  color: red;
  margin-left: -175px;
}

.xing {
  position: absolute;
  color: #f56c6c;
  margin-left: -106px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 440px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
.adjunct{
//  border: 1px solid red;
 margin-top: 60px;
}
</style>